<template>
	<view>
		<u-gap></u-gap>
		<navigator url="/pages/user/address/address?type=choice" class="address">
			<u-icon name="map" size="40" color="#A5A4A4"></u-icon>
			<view class="info" v-if="address == ''">
				<view class="">添加收货地址</view>
			</view>

			<view class="info" v-else>
				<view class="">收货人：{{address.userName}}</view>
				<view class="">收货地址：{{address.areaInfo}} {{address.address}}</view>
			</view>

			<u-icon name="arrow-right" size="32" color="#A5A4A4"></u-icon>
		</navigator>

		<block v-if="purchaseState == 1 && !participateGroup">
			<u-gap></u-gap>
			<view class="spell-type">
				<view>
					<u-section @click="show = true" :show-line="false" sub-color="#F39D21" title="请选择您的抢购方式" :sub-title="groupTitle"></u-section>
				</view>
			</view>
		</block>
		<!-- <u-gap v-if="purchaseState == 0"></u-gap> -->
		<!-- <view class="discount-box" :style="{
			'border-radius':purchaseState == 1 && !participateGroup ? '0 0 20rpx 20rpx' : '20rpx'
		}">
			<view>购买可得红包：<text>￥168.67</text></view>
			<view>分享可得红包：<text>￥168.67</text></view>
		</view> -->
		<u-gap></u-gap>
		<view class="product">
			<block v-if="source == ''">
				<view class="item">
					<u-image mode="aspectFill" border-radius="10" width="160" height="160" :src="goodsInfo.goodsMainPhoto"></u-image>
					<view class="info">
						<view class="info-name">{{goodsInfo.goodsName}}</view>
						<view class="specifications">{{goodsInfo.skuName}}</view>
						<view class="price" v-if="mainGoodsType==4">
							<view class="price-left" v-if="goodsInfo.redDeductible>=goodsInfo.salePrice"><view class="red-Integral">红包积分 {{goodsInfo.redIntegral*goodsInfo.count}}</view>
							<view class="oldprice">原价￥{{filterMoney(goodsInfo.salePrice * goodsInfo.count)}}</view></view>
						    <view class="price-left" v-if="goodsInfo.redDeductible<goodsInfo.salePrice">
								<view class="price-integral">
									<view class="sm-text">兑换后￥</view>
									<view class="integral-mount">{{goodsInfo.salePrice-goodsInfo.redDeductible+goodsInfo.redIntegral}}</view>
								</view>
								<view class="price-integral-two">
									红包积分:{{goodsInfo.redIntegral}}
								</view>
								<view class="old-price">原价:￥{{ goodsInfo.salePrice }}</view>
							</view>
							<view class="">x{{goodsInfo.count}}</view>
						</view>
						<view class="price" v-if="mainGoodsType!=4">
							<view class="">券{{filterMoney(goodsInfo.salePrice * goodsInfo.count)}}</view>
							<view class="">x{{goodsInfo.count}}</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="item" v-for="(item,index) in goodsInfo" :key="index">
					<u-image mode="aspectFill" border-radius="10" width="160" height="160" :src="item.goodsPhoto"></u-image>
					<view class="info">
						<view class="info-name">{{item.goodsName}}</view>
						<view class="specifications">{{item.goodsSkuInfo}}</view>
						<view class="price" v-if="mainGoodsType==4">
							<view class="price-left" v-if="goodsInfo.redDeductible>=goodsInfo.salePrice"><view class="red-Integral">红包积分 {{goodsInfo.redIntegral}}</view>
							<view class="oldprice">原价￥{{filterMoney(goodsInfo.salePrice * goodsInfo.count)}}</view></view>
						    <view class="price-left" v-if="goodsInfo.redDeductible<goodsInfo.salePrice">
								<view class="price-integral">
									<view class="sm-text">兑换后￥</view>
									<view class="integral-mount">{{goodsInfo.salePrice-goodsInfo.redDeductible+goodsInfo.redIntegral}}</view>
								</view>
								<view class="price-integral-two">
									红包积分:{{goodsInfo.redIntegral}}
								</view>
								<view class="old-price">原价:￥{{ goodsInfo.salePrice }}</view>
							</view>
							<view class="">x{{goodsInfo.count}}</view>
						</view>
						<view class="price" v-if="mainGoodsType!=4">
							<view class="">券{{filterMoney(item.price * item.goodsCount)}}</view>
							<view class="">x{{item.goodsCount}}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<u-gap></u-gap>
		<!-- <block v-if="exchange.goodsCountIntegral >=1">
			<view class="discount">
				<view class="">使用<text>{{exchange.goodsCountIntegral}}</text>商城补贴金</view>
				<view class="">
					<u-checkbox :disabled="exchange.userIntegral >=exchange.goodsCountIntegral ? false : true" shape="circle" v-model="checked"
					 icon-size="30" active-color="#FF4E47" @change="onChange"></u-checkbox>
				</view>
			</view>
			<view class="tip">剩余<text>{{exchange.userIntegral}}</text>商城补贴金</view>
		</block> -->
		<view class="remark">
			<view class="text">
				备注
			</view>
			<textarea v-model="remark" auto-height placeholder="请填写备注(选填)" />
			</view>
		<u-gap></u-gap>
		<view class="freight-box">
		<view class="freight">
			<view class="">运费</view>
			<view class="">{{shipPrice}}</view>
		</view>
		<!-- <view class="freight">
			<view class="">已优惠</view>
			<view class="" v-if="checked" style="color: #FF4D46;">￥{{exchange.userIntegral >=exchange.goodsCountIntegral ? exchange.goodsCountIntegral : 0}}</view>
			<view class="" v-else style="color: #FF4D46;">￥0</view>
		</view> -->
		</view>
		<view class="submit">
			<view class="box">
				<view class="money" v-if="mainGoodsType==4">实付积分：<text>{{goodsInfo.redIntegral*goodsInfo.count}}</text></view>
				<view class="money" v-if="mainGoodsType!=4">实付券：<text>{{totalPrice}}</text></view>
				<view class="btn" @click="downOrder">{{purchaseState == 1 ? participateGroup ? '参与抢购' : '立即抢购' : '立即下单'}} </view>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<view class="safe-area-inset-bottom"></view>
		
		<u-popup mode="center" closeable v-model="show" border-radius="20">
			<view class="spell-popup">
				<view class="title">请选择您的抢购方式</view>
				<view class="radio">
					<view class="item" v-for="(item,index) in groupType" :key="index" @click="choiceType(item)">
						<view class="name">{{item.title}}</view>
						<u-checkbox v-model="item.check" shape="circle" active-color="#FF4D46"></u-checkbox>
					</view>
					<!-- <view class="item">
						<view class="name">公众抢购</view>
						<u-checkbox shape="circle" active-color="#FF4D46"></u-checkbox>
					</view> -->
				</view>
				<view class="btn" @click="show = false;groupTitle = groupType.filter(item=>item.check == true)[0].title">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: true,
				show:false,
				totalPrice:0,
				remark:'',
				purchaseState:null,
				address:'',
				groupTitle:'',
				freight:0,
				participateGroup:'',
				exchange:'',
				source:'',
				goodsInfo:uni.getStorageSync('purchasedSeparatelyInfo'),
				groupType:[
					{
						title:'公众抢购',
						groupBuyType:1,
						check:true
					},
					{
						title:'包团抢购',
						groupBuyType:2,
						check:false
					}
				],
				mainGoodsType:null,
				isRedIntegral:false,//是否使用红包积分
				totalIntegral:0,//需支付的总积分
				goodsClassId:""
			};
		},
		computed:{
			shipPrice(){
				return this.freight == 0 ? '免邮' : '￥'+this.freight
			}
		},
		onLoad(options) {
			console.log(options);
			this.mainGoodsType=options.mainGoodsType;
			this.purchaseState = options.purchaseState
			this.participateGroup = options.participateGroup
			this.cartsId = options.cartsId
			this.skuAttrs = this.goodsInfo.skuAttrs
			this.goodsId = options.goodsId
			this.launchType = options.launchType
			this.groupBuyingListId = options.groupBuyingListId
			this.source = options.source ? options.source : ''
			this.goodsClassId=options.goodsClassId;
			if(this.launchType){
				this.groupTitle = this.groupType[this.launchType - 1].title
			}
			if(options.mainGoodsType&&options.mainGoodsType==4){
				this.isRedIntegral=true;
				this.totalIntegral=this.goodsInfo.redIntegral*this.goodsInfo.count;
			}
			// this.groupBuyType = options.groupBuyType
			console.log(this.goodsInfo);
			
			this.$u.get('useraddress/defaultAddress').then(res=>{
				if(Object.keys(res).length == 0)return
				this.address = res
			})
			if(this.purchaseState == 0){
				this.getOrderPrice()
			}else if(this.purchaseState == 1){
				this.$u.post('groupbuyinglist/getOrderPrice',{
					goodsCount:this.goodsInfo.count,
					goodsId:this.goodsId,
					skuAttrs:this.skuAttrs,
					isRedIntegral:this.isRedIntegral
				}).then(res=>{
					this.totalPrice = res.totalPrice
					this.freight = res.shipPrice
				})
			}else{
				
			}
		},
		onUnload() {
			uni.removeStorageSync('purchasedSeparatelyInfo')
		},
		methods:{
			filterMoney(money){
				return Math.floor(money * 100) / 100
			},
			getOrderPrice(){
				this.$u.post('orderform/getOrderPrice',{
					isUseIntegral:this.checked ? 1 : 0,
					carts:this.source == 'goodsCart' ? JSON.parse(this.cartsId) : [this.cartsId],
					isRedIntegral:this.isRedIntegral
				}).then(res=>{
					this.totalPrice = res.totalPrice
					this.freight = res.shipPrice
					if(this.checked){
						this.exchange = res.exchange
					}
				})
			},
			onChange(e){
				this.checked = e.value
				this.getOrderPrice()
			},
			choiceType(item){
				this.groupType.forEach(item=>item.check = false)
				item.check = true
			},
			updateAddress(item){
				this.address = item
			},
			downOrder(){
				let new_totalMoney=0;
				console.log(11)
				if(this.mainGoodsType==4){
					new_totalMoney=this.totalIntegral;
				}else{
					new_totalMoney=this.totalPrice;
				}
				if(this.address == ''){
					uni.showToast({
						title:'请指定一个收货地址',
						icon:'none'
					})
					return
				}
				
				if(this.participateGroup){
					console.log(12)
						this.$u.post('groupbuyinglist/joinGroupBuyingList', {
							goodsId:this.goodsId,
							channel: 3,
							goodsCount:this.goodsInfo.count,
							groupBuyingListId: this.groupBuyingListId,
							skuAttrs:this.skuAttrs,
							userAddressId:this.address.id,
							remark:this.remark
							// groupBuyType:this.groupBuyType
						}).then(result => {
							uni.removeStorageSync('purchasedSeparatelyInfo')
							uni.showToast({
								title: '订单已提交'
							})
							setTimeout(() => {
								this.$u.route('/pages/purchase/pay/pay', {
									money:new_totalMoney,
									data: JSON.stringify(result),
									mainGoodsType:this.mainGoodsType,
									goodsClassId:this.goodsClassId
								});
							}, 1500)
						})
					return
				}
				if(this.purchaseState == 1){
					console.log(13)
					this.$u.post('groupbuyinglist/launchGroupBuyingList',{
						goodsId:this.goodsId,
						channel:3,
						goodsCount:this.goodsInfo.count,
						groupBuyType:this.groupType.filter(item=>item.check == true)[0].groupBuyType,
						launchType:this.launchType,
						remark:this.remark,
						skuAttrs:this.skuAttrs,
						userAddressId:this.address.id
					}).then(res=>{
						uni.showToast({
							title:'订单已提交'
						})
						uni.removeStorageSync('purchasedSeparatelyInfo')
						setTimeout(()=>{
							this.$u.route('/pages/purchase/pay/pay',{
								money:new_totalMoney,
								data:JSON.stringify(res),
								mainGoodsType:this.mainGoodsType,
								goodsClassId:this.goodsClassId
							});
						},1500)
						console.log(res)
					})
					return
				}
				console.log(14)
				this.$u.post('orderform/save',{
					carts:this.source == 'goodsCart' ? JSON.parse(this.cartsId) : [this.cartsId],
					channel:3,
					userAddressId:this.address.id,
					remark:this.remark,
					isRedIntegral:this.isRedIntegral
					// storeId:this.goodsInfo.sellerStoreId
				}).then(res=>{
					uni.showToast({
						title:'订单已提交'
					})
					uni.removeStorageSync('purchasedSeparatelyInfo')
					setTimeout(()=>{
						this.$u.route('/pages/purchase/pay/pay',{
							money:new_totalMoney,
							data:JSON.stringify(res),
							mainGoodsType:this.mainGoodsType,
							goodsClassId:this.goodsClassId
						});
					},1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.discount-box{
		background-color: #fff;
		padding: 0 30rpx;
		margin: 0 30rpx;
		view{
			line-height: 80rpx;
			text{
				color: #FF4D46;
			}
			&:last-child{
				border-top: 1rpx solid #E1E0E0;
			}
		}
	}
	.freight-box{
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
		margin: 0 30rpx;
	}
	.freight{
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 30rpx;
		&:last-child{
			border-top: 1rpx solid #E1E0E0;
			
		}
	}
	.spell-popup{
		padding: 0 60rpx;
		padding-bottom: 30rpx;
		.btn{
			text-align: center;
			color: #FFFFFF;
			font-size: 30rpx;
			margin-top: 100rpx;
			line-height: 80rpx;
			background: linear-gradient(90deg, #FD5C1D, #FD9B1D);
			border-radius: 10rpx;
		}
		.radio{
			.item{
				display: flex;
				&:last-child{
					border-bottom: none;
				}
				border-bottom: 1rpx solid #E1E0E0;
				justify-content: space-between;
				width: 440rpx;
				align-items: center;
				.name{
					font-weight: bold;
					font-size: 36rpx;
				}
				padding: 30rpx  0;
			}
		}
		.title{
			text-align: center;
			padding: 50rpx 0;
		}
	}
	.spell-type{
		// padding: 0 30rpx;
		margin: 0 30rpx;
		// border-radius: 20rpx 20rpx 0 0;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 0 30rpx;
		>view{
			// border-bottom:1rpx solid #E1E0E0;
			padding: 20rpx 0;
		}
	}
	.submit {
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;

		.box {
			display: flex;
			padding: 0 30rpx;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
		}

		.btn {
			color: #FFFFFF;
			padding: 15rpx 50rpx;
			background: linear-gradient(90deg, #FF3868, #FC6161);
			box-shadow: 1rpx 10rpx 15rpx 2rpx rgba(255, 78, 70, 0.3);
			border-radius: 32px;
		}

		.money {
			font-size: 30rpx;
			text {
				color: #FF4E47;
				font-weight: bold;
			}
			
		}
	}

	.remark {
		background-color: #FFFFFF;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		font-size: 28rpx;
		.text{
			border-bottom: 1rpx solid #F7F7F7;
			margin-bottom: 20rpx;
			padding-bottom: 30rpx;
		}
		textarea{
			width: 100%;
			min-height: 200rpx;
			font-size: 28rpx;
		}
	}

	.tip {
		font-size: 24rpx;
		text-align: right;
		padding: 20rpx 0;
		padding-right: 30rpx;

		text {
			color: #FF4E47;
		}
	}

	.discount {
		background-color: #FFFFFF;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 0;

		view {
			&:first-child {
				font-size: 28rpx;

				text {
					color: #FF4E47;
				}
			}
		}
	}

	.product {
		background-color: #FFFFFF;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding: 15rpx 0;

		.item {
			display: flex;
			padding: 15rpx 30rpx;

			.info {
				flex: 1;
				margin-left: 20rpx;
				position: relative;

				.price {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						&:first-child {
							color: #FF4E47;
							font-weight: bold;
						}

						&:last-child {
							color: #A5A4A4;
							font-size: 28rpx;
						}
					}
					.price-left{
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						.oldprice{
							margin-left: 10rpx;
							color: #d1d1d1;
							font-weight: normal;
							text-decoration: line-through;
						}
					}
					.price-integral{
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
					}
				}

				.specifications {
					font-size: 24rpx;
					color: #A5A4A4;
					padding: 8rpx 0;
				}

				.info-name {
					color: #444444;
					font-size: 28rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
		}
	}

	page {
		background-color: $u-bg-color;
		padding-bottom: 130rpx;
	}

	.address {
		display: flex;
		margin: 0 30rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 40rpx 20rpx;

		.info {
			flex: 1;

			view {
				font-size: 30rpx;
				color: #343434;
			}

			margin: 0 20rpx;
		}
	}
</style>
